<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>播放器</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/videoPlay.css">
</head>
<script src="js/jquery-3.6.0.min.js"></script>
<body>

<!--按钮表和按钮里-->
<input type="checkbox" id="menu_btn">
<label class="menu-btn" for="menu_btn">
    <i class="fa fa-bars" aria-hidden="true"></i>
</label>
<!--点击三道杠后出现的-->
<div class="wrapper">
    <ul class="menu">
        <li><a href="index.html">首页</a></li>
        <li><a href="messageBoard.html">留言板</a></li>
        <li><a href="videoHall.html">放映厅</a></li>
        <li><a href="login.html">登录</a></li>
        <li><a href="#">空</a></li>
    </ul>
</div>
<ul class="icon-nav">
    <li>
        <a href="">
            <i class="fa fa-home"></i>
            <span>首页</span>
        </a>
    </li>
    <li>
        <a href="">
            <i class="fa fa-product-hunt"></i>
            <span>产品管理</span>
        </a>
    </li>
    <li>
        <a href="">
            <i class="fa fa-user-circle"></i>
            <span>会员管理</span>
        </a>
    </li>
    <li>
        <a href="">
            <i class="fa fa-shopping-bag"></i>
            <span>订单管理</span>
        </a>
    </li>
    <li>
        <a href="">
            <i class="fa fa-credit-card-alt"></i>
            <span>财务中心</span>
        </a>
    </li>
    <!-- 分割线 -->
    <li class="split">
        <a href="">
            <i class="fa fa-bell"></i>
            <span>消息</span>
        </a>
    </li>
    <li>
        <a href="">
            <i class="fa fa-gear"></i>
            <span>系统配置</span>
        </a>
    </li>
    <li>
        <a href="">
            <i class="fa fa-user"></i>
            <span>用户中心</span>
        </a>
    </li>
</ul>
<!--===========================================公共部分=======================================================-->


<!--加载部分在一段时间后会自动删除-->
<div class="loader-wrapper" id="loader-wrapper">
    <div class="loader"></div>
    <div class="loader-text">
        <!-- 10个div -->
        <div>L</div>
        <div>O</div>
        <div>A</div>
        <div>D</div>
        <div>I</div>
        <div>N</div>
        <div>G</div>
        <div></div>
    </div>
</div>


<!--=========================================================================视频播放模块-->
<div id="video_main">
    <video controls="controls" id="video_controller" width="800" height="600">
        <source src="http://106.15.55.45:9000/vodeo/video1.mp4?Content-Disposition=attachment%3B%20filename%3D%22video1.mp4%22&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20221007%2F%2Fs3%2Faws4_request&X-Amz-Date=20221007T022937Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=0f2d0cec329dea4fe8068cbc496dd55570cb20ecc13758727181467158eed815">
        <track src="" label="中文字幕" srclang="zh" kind="subtitles" default/>
    </video>
    <!--===================================================================视频下方评论 分享模块-->
    <div id="video_mode">
<!--        发送留言功能-->
        <div class="email-box" style="float: right;" >
            <i style="border-radius: 10px 0 0 10px" ></i>
            <input class="tbox" type="email" name="" value="" placeholder="输入你想说的!">
            <input class="btn" type="button" name="button" value="发送!">
        </div>
<!--        分享功能-->
        <div class="share-button"  style="float: left;">
            <span><i class="fa fa-share-alt" aria-hidden="true"></i> 去分享</span>
            <a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a>
            <a href="#"><i class="fa fa-weixin" aria-hidden="true"></i></a>
            <a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a>
            <a href="#"><i class="fa fa-renren" aria-hidden="true"></i></a>
        </div>

    </div>
</div>


</body>


<script>
    //等待加载,移除加载页面
    $(document).ready(function () {
        setTimeout(function () {
            $("#loader-wrapper").remove();
        }, 1500)
        //自动播放视频
        setTimeout(function () {
            var audio = document.getElementById('video_controller');
            audio.play();
        }, 1000)
    });
</script>
</html>